<template>
	<view class="my-add-path">
		
		<!-- / #ifdef MP-WEIXIN -->
		<!-- <view class="wx-nav">
			<image class="left" src="http://yunzhidun.oss-cn-beijing.aliyuncs.com/weixin/static/mine/Vector1.png" mode=""></image>
			<view class="cen"><text>新增地址</text></view>
			<view><button class="right">保存</button></view>
		</view> -->
		<!-- /#endif -->
		
		<view class="path-item">
			<view class="">收 件 人</view>
			<input type="text" value="" placeholder="收件人姓名" v-model="pathObj.name"/>
		</view>
		<view class="path-item">
			<view class="">手 机 号</view>
			<input type="text" value="" placeholder="11位手机号" v-model="pathObj.tel"/>
		</view>
		<view class="path-item">
			<view class="">所在地区</view>
			<view @tap="showCityPicker">{{pathObj.city}}  ></view>
			<mpvue-city-picker ref="mpvueCityPicker" :pickerValueDefault="pickerValueDefault" @onConfirm="onConfirm">
				
			</mpvue-city-picker>
		</view>
		<view class="path-item">
			<view class="">详细地址</view>
			<input type="text" value="" placeholder="5到60个字符" v-model="pathObj.details"/>
		</view>
		<view class="path-item">
			<view class="">设为默认地址</view>
			<radio-group name="" @change="radioChange">
				<label class="radio">
					<radio color="#4a9cff" :checked="pathObj.isDefault"></radio><text></text>
				</label>
			</radio-group>
			
		</view>
		
		<button type="button" class="save" @tap="submit">
			保存
		</button>
		
		
	</view>
</template>

<script>
	import mpvueCityPicker from '@/components/uni/mpvue-citypicker/mpvueCityPicker.vue'
	import {mapActions} from 'vuex'
	export default {
		data() {
			return {
				
				pickerValueDefault:[0,0,1],
				pathObj:{
					name:"",
					tel:"",
					city:"请选择",//默认情况下
					details:"",
					isDefault:false
				},
				i:-1,
				//是否修改的状态
				isStatus:false
			};
		},
		
		
		//进入修改页面，接收修改的数据
		onLoad(e) {
			// console.log(e.data)
			if(e.data){
				uni.setNavigationBarTitle({
					title:"修改地址"
				})
				let result = JSON.parse(e.data);
				this.pathObj = result.item;
				this.i = result.index;
				this.isStatus = true;
			}
		},
		
		
		components:{
			mpvueCityPicker
		},
		//页面生命周期,顶部按钮保存传参
		onNavigationBarButtonTap() {
			this.createPathFn(this.pathObj);
			uni.navigateBack({
				delta:1
			})
		},
		methods: { 
			...mapActions(["createPathFn","updatePathFn"]),
			showCityPicker() {
				this.$refs.mpvueCityPicker.show();
			},
			onConfirm(e){
				console.log(e);
				this.pathObj.city = e.label;
			},
			radioChange(){
				this.pathObj.isDefault = !this.pathObj.isDefault;
			},
			//保存修改
			submit(){
				if(this.isStatus){
					//修改
					this.updatePathFn({
						index:this.i,
						item:this.pathObj
					});
					uni.navigateBack({
						delta:1
					})
				}else{
					//新增
					this.createPathFn(this.pathObj);
					uni.navigateBack({
						delta:1
					})
				}
				
			}
		}
	}
</script>

<style>
.wx-nav{
	display: flex;
	width: 100%;
	justify-content: space-between;
	align-items: center;
	text-align: center;
	margin: 10rpx 3rpx 0 0;
	padding: 25rpx 10rpx;
	height: 150rpx;
	line-height: 150rpx;
}
	.left{
		width: 30rpx;
		height: 30rpx;
	}
	.cen{
		text-align: center;
	}
	.right{
		text-align: center;
	}
	
	.my-add-path{
		padding:10rpx 10rpx;
	}
		.path-item{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 16rpx 0;
			width: 100%;
			border-bottom: 2rpx solid #cccccc;
		}
		.path-item input{
			flex: 1;
			text-align: left;
			padding-left: 20rpx;
		}
		
		.save{
			background-color: #49a2dd;
			line-height: 80rpx;
			width: 100%;
			color: #fff;
			text-align: center;
		}
</style>
